<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/home.css">
</head>

<body>

    <!-- 作为一个遮罩,对背景高斯模糊 -->
    <div class="cover"></div>

    <!-- 整个界面的容器 -->
    <div class="home-container">
        <!--主界面 聊天区域  -->
        <div class="main">
            <!--左边的会话列表  -->
            <div class="left">
                <!-- 当前用户名 -->
                <div class="user">
                    张三
                </div>

                <!-- 用户名下是搜索框和搜索按钮 -->
                <div class="search">

                    <input type="text">

                    <button></button>

                </div>
 
                <!-- 标签页: 会话选择标签, 好友列表标签选择 -->
                <div class="table">
                    <!-- 会话标签 -->
                    <div class="table-session">

                    </div>
                     <!-- 好友列表标签 -->
                    <div class="table-friend">

                    </div>
                </div>

               <!-- 会话 列表框 -->
               <ul class="list" id="session-list">
                     <!-- 一个li,一个会话: 有联系人,部分会话内容 -->
                     <li>
                        <h3>lisi</h3>
                         <p>干嘛</p> 
                    </li>
                    <!-- 设置选中会话后的效果 -->
                    <li class="selected">
                        <h3>lisi</h3>
                         <p>干嘛</p> 
                    </li> 
               </ul>
               
               <!-- 好友列表 , 使用和会话列表一样的class,使用h4列出好友名字-->
                <ul class="list hide" id="friend-list">
                    <li>
                        <h4>
                          zhangsan
                        </h4>
                    </li>
                </ul>



            </div>
            <!-- 右边的聊天输入 -->
            <div class="right">
                  <!-- 标题: 好友名字 -->
                  <div class="title">
                      
                  </div>

                    <!-- 消息区  -->
                     <div class="message-show">
                            <!-- 一个消息 -->
                            <!-- <div class="message message-left">
                                 一个消息块
                                <div class="box">
                                    <h4>lisi</h4>
                                    <p>消息</p>
                                </div>
                            </div>
                            <div class="message message-right">
                                一个消息块 
                               <div class="box">
                                <h4>zangsan</h4>
                                <p>消息</p>
                               </div>
                           </div> -->
                     </div>
                     <!-- 消息编辑 -->
                     <textarea class="message-input">
                        今天吃什么
                     </textarea>

                     <!-- 发送按钮 -->
                      <div class="ctrl">
                        <button>发送</button>
                      </div>

            </div>
        </div>
    </div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/home.js"></script>

</body>

</html>